<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息 - 招聘APP</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: #f9f9f9;
            height: 100vh;
        }
        .app-container {
            max-width: 390px;
            height: 100%;
            margin: 0 auto;
            background-color: white;
        }
        .chat-item {
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .chat-item:hover {
            background-color: #f9f9f9;
        }
        .chat-item:last-child {
            border-bottom: none;
        }
        .chat-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 15px;
            position: relative;
        }
        .online-indicator {
            width: 12px;
            height: 12px;
            background-color: #52c41a;
            border-radius: 50%;
            border: 2px solid white;
            position: absolute;
            bottom: 0;
            right: 0;
        }
        .chat-content {
            flex: 1;
        }
        .chat-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }
        .chat-name {
            font-weight: 600;
            font-size: 16px;
        }
        .chat-time {
            font-size: 12px;
            color: #999;
        }
        .chat-message {
            font-size: 14px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 260px;
        }
        .chat-badge {
            background-color: #1677ff;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            margin-left: 10px;
        }
        .tab-nav {
            display: flex;
            border-bottom: 1px solid #eee;
        }
        .tab-nav button {
            flex: 1;
            padding: 15px 0;
            text-align: center;
            font-weight: 500;
            color: #666;
            transition: all 0.3s;
            position: relative;
        }
        .tab-nav button.active {
            color: #1677ff;
        }
        .tab-nav button.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            width: 50%;
            height: 3px;
            background-color: #1677ff;
            border-radius: 3px;
        }
        .search-bar {
            padding: 10px 15px;
            background-color: #f5f5f5;
        }
        .search-input {
            width: 100%;
            padding: 10px 15px;
            border-radius: 20px;
            border: none;
            background-color: white;
            font-size: 14px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }
        .search-input::placeholder {
            color: #999;
        }
        .empty-state {
            height: 60vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            text-align: center;
        }
        .empty-state img {
            width: 150px;
            margin-bottom: 20px;
        }
        .bottom-nav {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-around;
            padding: 15px 0;
            background-color: white;
            border-top: 1px solid #eee;
        }
        .bottom-nav a {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #666;
            text-decoration: none;
            font-size: 12px;
        }
        .bottom-nav a i {
            font-size: 20px;
            margin-bottom: 5px;
        }
        .bottom-nav a.active {
            color: #1677ff;
        }
    </style>
</head>
<body>
    <div class="app-container relative" style="padding-bottom: 80px;">
        <div class="py-4">
            <div class="flex justify-between items-center px-4 mb-4">
                <h1 class="text-xl font-bold">消息</h1>
                <button class="p-2">
                    <i class="fas fa-ellipsis-h text-gray-600"></i>
                </button>
            </div>
            
            <div class="tab-nav mb-2">
                <button class="active" id="chats-tab">聊天</button>
                <button id="notifications-tab">通知</button>
            </div>
            
            <div class="search-bar mb-2">
                <input type="text" class="search-input" placeholder="搜索">
            </div>
            
            <div id="chats-content">
                <!-- 聊天列表 -->
                <div class="chat-item" onclick="window.location.href='chat.html'">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fHByb2ZpbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=100&h=100&q=80" alt="张伟" class="chat-avatar">
                        <div class="online-indicator"></div>
                    </div>
                    <div class="chat-content">
                        <div class="chat-header">
                            <span class="chat-name">张伟</span>
                            <span class="chat-time">10:30</span>
                        </div>
                        <div class="flex items-center">
                            <p class="chat-message">您好，我对贵公司的前端开发职位很感兴趣</p>
                            <span class="chat-badge">2</span>
                        </div>
                    </div>
                </div>
                
                <div class="chat-item" onclick="window.location.href='chat.html'">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y29tcGFueXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=100&h=100&q=80" alt="科技智联" class="chat-avatar">
                    </div>
                    <div class="chat-content">
                        <div class="chat-header">
                            <span class="chat-name">科技智联</span>
                            <span class="chat-time">昨天</span>
                        </div>
                        <p class="chat-message">我们已经收到您的简历，请问您什么时候有空进行视频面试？</p>
                    </div>
                </div>
                
                <div class="chat-item" onclick="window.location.href='chat.html'">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1560179707-f14e90ef3623?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Y29tcGFueSUyMGxvZ298ZW58MHx8MHx8&auto=format&fit=crop&w=100&h=100&q=80" alt="未来科技" class="chat-avatar">
                    </div>
                    <div class="chat-content">
                        <div class="chat-header">
                            <span class="chat-name">未来科技</span>
                            <span class="chat-time">周一</span>
                        </div>
                        <p class="chat-message">感谢您参加面试，我们会在3天内给您答复</p>
                    </div>
                </div>
                
                <div class="chat-item" onclick="window.location.href='chat.html'">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHByb2ZpbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=100&h=100&q=80" alt="李梅" class="chat-avatar">
                    </div>
                    <div class="chat-content">
                        <div class="chat-header">
                            <span class="chat-name">李梅</span>
                            <span class="chat-time">上周</span>
                        </div>
                        <p class="chat-message">您好，我看到您发布的产品经理职位，我想了解一下具体的工作内容和要求</p>
                    </div>
                </div>
                
                <div class="chat-item" onclick="window.location.href='chat.html'">
                    <div class="relative">
                        <img src="https://images.unsplash.com/photo-1568822617270-2c1579f8dfe2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Zm9vZCUyMGNvbXBhbnl8ZW58MHx8MHx8&auto=format&fit=crop&w=100&h=100&q=80" alt="美食家" class="chat-avatar">
                    </div>
                    <div class="chat-content">
                        <div class="chat-header">
                            <span class="chat-name">美食家</span>
                            <span class="chat-time">05/18</span>
                        </div>
                        <p class="chat-message">您的入职流程已经开始，请按照邮件中的步骤完成相关资料的提交</p>
                    </div>
                </div>
            </div>
            
            <div id="notifications-content" class="hidden">
                <!-- 通知列表 -->
                <div class="chat-item">
                    <div class="relative">
                        <div class="chat-avatar flex items-center justify-center bg-blue-100 text-blue-500">
                            <i class="fas fa-user-plus text-xl"></i>
                        </div>
                    </div>
                    <div class="chat-content">
                        <div class="chat-header">
                            <span class="chat-name">新匹配</span>
                            <span class="chat-time">今天</span>
                        </div>
                        <p class="chat-message">您与科技智联互相喜欢，可以开始聊天了</p>
                    </div>
                </div>
                
                <div class="chat-item">
                    <div class="relative">
                        <div class="chat-avatar flex items-center justify-center bg-green-100 text-green-500">
                            <i class="fas fa-calendar-check text-xl"></i>
                        </div>
                    </div>
                    <div class="chat-content">
                        <div class="chat-header">
                            <span class="chat-name">面试提醒</span>
                            <span class="chat-time">昨天</span>
                        </div>
                        <p class="chat-message">您与未来科技的视频面试将在明天下午3点开始</p>
                    </div>
                </div>
                
                <div class="chat-item">
                    <div class="relative">
                        <div class="chat-avatar flex items-center justify-center bg-yellow-100 text-yellow-500">
                            <i class="fas fa-bell text-xl"></i>
                        </div>
                    </div>
                    <div class="chat-content">
                        <div class="chat-header">
                            <span class="chat-name">系统通知</span>
                            <span class="chat-time">05/20</span>
                        </div>
                        <p class="chat-message">您的简历已被查看10次，建议完善更多信息以提高匹配率</p>
                    </div>
                </div>
                
                <!-- 空状态 -->
                <div class="empty-state hidden">
                    <img src="https://images.unsplash.com/photo-1584824486509-112e4181ff6b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bm90JTIwZm91bmR8ZW58MHx8MHx8&auto=format&fit=crop&w=500&h=500&q=80" alt="没有消息">
                    <h2 class="text-xl font-bold mb-2">暂无消息</h2>
                    <p class="text-gray-500 mb-4">去发现页面寻找感兴趣的人才或企业</p>
                    <button class="bg-blue-500 text-white px-4 py-2 rounded-full">去发现</button>
                </div>
            </div>
        </div>
        
        <!-- 底部导航栏（固定） -->
        <div class="bottom-nav" style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 390px;">
            <a href="#" id="nav-home">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </a>
            <a href="#" class="active">
                <i class="fas fa-comment"></i>
                <span>消息</span>
            </a>
            <a href="my.html">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </a>
        </div>
    </div>

    <script>
        // 标签切换逻辑
        const chatsTab = document.getElementById('chats-tab');
        const notificationsTab = document.getElementById('notifications-tab');
        const chatsContent = document.getElementById('chats-content');
        const notificationsContent = document.getElementById('notifications-content');
        
        chatsTab.addEventListener('click', () => {
            chatsTab.classList.add('active');
            notificationsTab.classList.remove('active');
            chatsContent.classList.remove('hidden');
            notificationsContent.classList.add('hidden');
        });
        
        notificationsTab.addEventListener('click', () => {
            notificationsTab.classList.add('active');
            chatsTab.classList.remove('active');
            notificationsContent.classList.remove('hidden');
            chatsContent.classList.add('hidden');
        });

        // 底部导航：根据角色跳转正确首页
        (function(){
            const role = localStorage.getItem('role');
            const navHome = document.getElementById('nav-home');
            if (role === 'company') {
                navHome.setAttribute('href', 'card-matching-company.html');
            } else {
                navHome.setAttribute('href', 'card-matching-talent.html');
            }
        })();
    </script>
</body>
</html> 